<template>
	<view class="kaipiaoxinxi">
		<view style="height: 20rpx;"></view>
		<view class="shenqingfapiao-main">
			<view class="shenqingfapiao-box">
				<view class="shenqingfapiao-top">
					<view class="shenqingfapiao-top_left">
						<text style="margin-right: 10rpx;">可开发票订单-{{isxianshang == 0 ? '线下订单':'线上订单'}} </text>
						<u-icon name="error-circle-fill" color="#ff8023" @click="openShuomingPop"></u-icon>
					</view>
					<!-- 0（默认）：线下订单；1：线上订单  -->
					<view class="shenqingfapiao-top_right" style="padding: 0 20rpx;" @click="changeOrderList()">
						切换{{isxianshang == 1 ? '线下订单' : '线上订单'}}</view>
				</view>
				<view class="shenqingfapiao-kpxx" v-if="list.length">
					<view class="kpxx-list" :class="{'active': ischange.indexOf(index)!=-1}"
						v-for="(item,index) in list" :key="index" @click="choose(isxianshang,item,index)">
						<view class="kpxx-list-top">{{item.bianhao}}</view>
						<view class="kpxx-list-cell">
							<text class="kpxx-cell-left">公司名称：</text>
							<text class="kpxx-cell-right">{{item.company}}</text>
						</view>
						<view class="kpxx-list-cell">
							<text class="kpxx-cell-left">业务名称：</text>
							<text class="kpxx-cell-right">{{item.rmName}}</text>
						</view>
						<view class="kpxx-list-cell">
							<text class="kpxx-cell-left">订单金额：</text>
							<text class="kpxx-cell-right">￥{{item.jine}}</text>
						</view>
						<view class="kpxx-list-cell">
							<text class="kpxx-cell-left">订单时间：</text>
							<text class="kpxx-cell-right">{{item.time.replace(/T.+/, '')}}</text>
						</view>
					</view>
				</view>
				<view class="wodefapiao-null" v-else>
					<image src="@/static/img/wodefapiao/fapiao-null.png" class="wodefapiao-null-img"></image>
					<view class="wodefapiao-null-text">没有相关的开票订单信息</view>
				</view>

			</view>
		</view>
		<view class="shenqingfapiao-foot">
			<view class="shenqingfapiao-foot-right" style="width: 100%;" @click="sumbit">确定订单</view>
		</view>

		<!-- 选择订单说明弹窗 -->
		<u-popup :show="isshowPopup" mode="center" :round="5">
			<view class="shuomingPop">
				<view class="guanbi-icon" @click="closeShuomingPopup">×</view>
				<view class="shuomingPop-title">说明</view>
				<view class="shuomingPop-text">1.线上订单和线下订单无法合并在一起开发票，您可以点击右上角的按钮切换。</view>
				<view class="shuomingPop-text">2.线下订单只能单独开发票。</view>
				<view class="shuomingPop-text">3.如有疑问可以和您的专属客服沟通联系。</view>
				<view class="shuomingPop-btn">
					<text class="quren-btn" @click="call">电话咨询</text>
					<text class="quren-btn" @click="closeShuomingPopup">知道了</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import commonjs from '@/common/script/common.js';
	export default {
		data() {
			return {
				serverTel: '',
				isxianshang: 0,
				list: [],
				isshowPopup: false,
				location: '11042',
				checkArr: [],
				ischange: [],
				fapiaojine: 0,
				xianxiaOrderid: '',
				kpxxid: ''
			}
		},
		onLoad(option) {
			this.kpxxid = option.kpxxid
			this.serverTel = option.serverTel
		},
		onShow() {
			this.getList()
		},
		methods: {
			call() {
				uni.makePhoneCall({
					phoneNumber: this.serverTel
				})
			},
			changemoren(e) {},
			openShuomingPop() {
				this.isshowPopup = true
				this.ischange = []
			},
			closeShuomingPopup() {
				this.isshowPopup = false
			},
			changeOrderList() {
				this.ischange = []
				// if(this.isxianshang == 0){
				this.checkArr = []
				// }
				this.isxianshang = this.isxianshang === 0 ? 1 : 0
				this.getList()
			},
			getList() {
				// 注：仅显示可以选择开票的订单，如：此订单在驳回中，或申请中等则不显示
				uni.$u.http
					.post('User/fapiao/OrderBindHandler.ashx', {
						location: this.location,
						type: this.isxianshang,
					}).then((rs) => {
						this.list = rs.list

					}).catch((err) => {
						this.list = []
					})
			},
			choose(type, item, index) {
				// console.log(type,this.ischange,index)
				if (type == 0) {
					if (this.ischange[0] == index) {
						this.ischange = []
						this.checkArr = []
						this.fapiaojine = 0
					} else {
						this.ischange.push(index)
						this.checkArr.push(item.id)
						this.fapiaojine = item.jine
					}
				} else {
					if (this.ischange.indexOf(index) == -1) {
						// if (this.isInArray(this.checkArr, item.id)) {
						// 	this.ischange.splice(this.ischange.indexOf(index), 1); //取消选中
						// 	this.checkArr = this.ischange.filter(item => {
						// 		return item != item.id;
						// 	})
						// 	this.fapiaojine = commonjs.subtract(this.fapiaojine, item.jine, 2);
						// } else {

						// }
						this.ischange.push(index)
						this.checkArr.push(item.id);
						this.fapiaojine = commonjs.add(this.fapiaojine, item.jine, 2);
					} else {
						this.ischange.splice(this.ischange.indexOf(index), 1); //取消选中
						this.checkArr = this.ischange.filter(item => {
							return item != item.id;
						})
						this.fapiaojine = commonjs.subtract(this.fapiaojine, item.jine, 2);
					}
				}



			},
			isInArray(arr, value) {
				for (var i = 0; i < arr.length; i++) {
					if (value === arr[i]) {
						return true;
					}
				}
				return false;
			},
			sumbit() {
				if (this.fapiaojine == 0) {
					uni.showToast({
						title: '请选择需要开票的订单',
						icon: "none"
					});
					return
				}
				uni.redirectTo({
					url: '/pages/user/wodefapiao/shenqingfapiao?orderid=' + this.checkArr.toString() + '&jine=' +
						this.fapiaojine + '&kpxxid=' + this.kpxxid + '&orderType=' + this.isxianshang
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "@/static/css/fapiao.scss";

	page {
		background-color: #f4f4f4;
		height: 100%;
	}

	.kaipiaoxinxi {
		height: 100%;
	}

	.shenqingfapiao-main {
		margin: 0 28rpx;
		height: calc(100% - 10px);
	}

	.fpxx-foot-bd {
		display: flex;
		align-items: center;
		font-size: 22rpx;
		color: #333333;

		.default-icon {
			background: url(@/static/img/fpgl/fpgl_09.jpg) no-repeat;
			width: 30rpx;
			height: 30rpx;
			background-size: 100% 100%;
			margin-right: 6rpx;
		}
	}

	.fpxx-foot-bd_active {
		.default-icon {
			background: url(@/static/img/wodefapiao/moren-active.png) no-repeat;
			width: 30rpx;
			height: 30rpx;
			background-size: 100% 100%;
			margin-right: 6rpx;
		}
	}

	.shenqingfapiao-box {
		height: calc(100% - 10px);
	}

	.shenqingfapiao-top_left {
		display: flex;
	}

	.shenqingfapiao-kpxx {
		background-color: #ffffff;
		padding-bottom: 158rpx;
	}
</style>